<template>
  <div>
    <h1>第七种 组件通信 provide 和 inject</h1>
    <child-d></child-d>
    <h4>{{ msg }}</h4>
    <button @click="handler">修改msg</button>
  </div>
</template>

<script>
// @ is an alias to /src
import childD from "@/components/childD.vue";

export default {
  data() {
    return {
      // msg: "这是父组件about的变量",
    };
  },
  provide() {
    return {
      msg: "这是父组件about的变量",
    };
  },
  //可以把数据定义在provide里
  name: "HomeView",
  components: {
    childD,
  },
  methods: {
    handler() {
      // console.log("这是祖父about的方法" + val);
      this.msg = "修改后的about的变量";
    },
  },
};
</script>

<style lang="scss" scoped></style>
